<template>
  <p-card class="product-execu-wrap" :bordered="false">
    <div class="product-execu-search">
      <div class="table-page-search-wrapper">
        <p-form layout="inline">
          <p-row :gutter="24">
            <p-col :xl="6" :md="12">
              <p-form-item label="条码扫描">
                <p-input v-model="barCode" />
              </p-form-item>
            </p-col>
            <p-col :xl="6" :md="12">
              <p-form-item label="二级工序">
                <p-tree-select
                  v-model="params.processTwoCode"
                  :tree-data="secondStations"
                  :dropdown-style="{maxHeight: '500px'}"
                  tree-node-filter-prop="title"
                  show-search
                  allow-clear
                  tree-default-expand-all
                />
              </p-form-item>
            </p-col>
            <p-col :xl="6" :md="12">
              <p-form-item label="线体">
                <p-select v-model="params.lineno">
                  <p-select-option
                    v-for="item in lines"
                    :key="item.codeValue"
                    :value="item.codeValue"
                  >{{ item.textValue }}</p-select-option>
                </p-select>
              </p-form-item>
            </p-col>
            <p-col :xl="6" :md="12">
              <p-form-item label="工站">
                <p-tree-select
                  v-model="params.stationCode"
                  :tree-data="stations"
                  :dropdown-style="{maxHeight: '500px'}"
                  tree-node-filter-prop="title"
                  show-search
                  allow-clear
                  tree-default-expand-all
                />
              </p-form-item>
            </p-col>
          </p-row>
        </p-form>
      </div>
      <div class="btns-wrap">
        <p-button type="primary" @click="toQis">产品测试</p-button>
        <p-button type="primary" style="margin: 0 8px">超领物料</p-button>
        <p-button type="primary">生产退料</p-button>
      </div>
    </div>
    <div class="table-operator text-right">
      <p-radio-group :value="currentView" button-style="solid" @change="setCurrentView">
        <p-radio-button value="order-info">工单详情</p-radio-button>
        <p-radio-button value="spot-check">开线点检</p-radio-button>
        <p-radio-button value="sop">SOP</p-radio-button>
        <p-radio-button value="first-check">首检</p-radio-button>
        <p-radio-button value="collect" @click.native.stop="toCollect">工序采集</p-radio-button>
        <p-radio-button value="">生产异常</p-radio-button>
        <p-radio-button value="">工序交接</p-radio-button>
        <p-radio-button value="">工序产出</p-radio-button>
        <p-radio-button value="">在线送修</p-radio-button>
      </p-radio-group>
    </div>
    <div v-show="!isQis" class="product-execu-content__wrap">
      <div :style="{left: expand ? null : 0}" class="product-execu-content__slide" @click="toggleExpand(!expand)">
        <p-icon :type="expand ? 'left' : 'right'" />
      </div>
      <div :class="{unexpand: !isQis && !expand}" class="product-execu-content__left">
        <order :params="params" @on-item-click="onItemClick" />
      </div>
      <component
        v-if="currentView"
        :is="currentView"
        :item="item"
        :options="params"
        class="product-execu-content__right"
      />
    </div>
    <div v-show="isQis" class="product-execu-content__wrap">
      <div class="product-execu-content__left">
        <qis-base :params="qisParams" :status="qisStatus" @change="onQisChange" />
      </div>
      <qis 
        :item="item"
        :options="params"
        :data="qisData"
        @qis-status="setQisStatus"
        class="product-execu-content__right"
      />
    </div>
  </p-card>
</template>

<script>
import Order from './components/order'
import mesPeProcessApi from '@/api/mesPeProcess'
import { getAction } from '@/api/manage'

export default {
  components: {
    Order,
    OrderInfo: () => import('./components/order-info'),
    SpotCheck: () => import('./components/spot-check'),
    FirstCheck: () => import('./components/first-check'),
    Sop: () => import('./components/sop'),
    Qis: () => import('./components/qis'),
    QisBase: () => import('./components/qis-base')
  },
  data() {
    return {
      barCode: '',
      params: {
        processTwoCode: '',
        lineno: '',
        stationCode: ''
      },
      lines: [],
      processTree: [],
      item: {},
      currentView: 'order-info',
      qisData: {},
      qisStatus: '',
      expand: true,
      isQis: false
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.onRouteChange()
    })
  },
  computed: {
    qisParams() {
      const barCode = this.barCode
      const stationCode = this.params.stationCode
      return {
        barCode,
        stationCode
      }
    },
    stations() {
      const data = []
      this.processTree.forEach(item => {
        const children = []
        item.children.forEach(child => {
          const items = []
          child.children.forEach(one => {
            items.push({
              title: one.processmname,
              value: one.processmcode
            })
          })
          
          children.push({
            disabled: true,
            title: child.processmname,
            value: child.processmcode,
            children: items
          })
        })
        data.push({
          disabled: true,
          title: item.processmname,
          value: item.processmcode,
          children
        })
      })
      
      return data
    },
    secondStations() {
      const data = []
      this.processTree.forEach(item => {
        const children = []
        item.children.forEach(child => {
          children.push({
            title: child.processmname,
            value: child.processmcode,
          })
        })
        data.push({
          disabled: true,
          title: item.processmname,
          value: item.processmcode,
          children
        })
      })
      
      return data
    }
  },
  created() {
    this.getLines()
    this.getStations()
  },
  methods: {
    onRouteChange() {
      const { type } = this.$route.query
      if (type) {
        switch (type) {
          case 'qis':
            this.toQis()
            break
          case 'datacollect':
            this.toDatacollect()
            break
          default:
            this.isQis = false
            this.currentView = type
        }
      }
    },
    getLines() {
      const params = {
        startDate: '2020-01-01 00:00:00',
        endDate: '2120-01-01 23:59:59'
      }
      getAction('/mes-manufacture/mfProcess/getFilter', params).then(res => {
        this.lines = res.data.lines
      })
    },
    getStations() {
      mesPeProcessApi.getProcesstree().then(res => {
        this.processTree = res.data || []
      })
    },
    onItemClick(item) {
      this.item = Object.assign({}, item)
    },
    setCurrentView(event) {
      const val = event.target.value
      if (val === 'datacollect') {
        return
      }
      this.isQis = false
      this.currentView = val
    },
    onQisChange(qisData) {
      this.qisData = qisData
    },
    toQis() {
      this.isQis = true
      this.currentView = null
    },
    toCollect() {
      this.$router.push('/work/datacollect/Processcode')
    },
    setQisStatus(status) {
      this.qisStatus = status
    },
    toggleExpand(expand) {
      this.expand = expand
    }
  }
}
</script>

<style lang="less">
.product-execu {

  &-search {
    display: flex;

    .table-page-search-wrapper {
      flex: 1;
    }

    .btns-wrap {
      padding-top: 2px;
      padding-left: 24px;
    }
  }

  &-wrap {
    height: 100%;

    .poros-card-body {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
  }

  &-content {
    &__wrap {
      position: relative;
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    &__slide {
      position: absolute;
      left: 413px;
      top: 50%;
      z-index: 5;
      width: 24px;
      height: 62px;
      margin-top: -31px;
      line-height: 62px;
      text-align: center;
      background-color: #f7f7f7;
      border-radius: 5px;
      border: 1px solid #ECEDF0;
      cursor: pointer;
    }

    &__left,
    &__right,
    &__slide {
      transition: all .3s;
    }

    &__left {
      width: 425px;
      height: 100%;
      margin-right: 20px;
      overflow: hidden;

      &.unexpand {
        width: 0;
        margin-right: 0;
      }
    }

    &__right {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
  }
}
</style>